<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习指南</title>
    <script src="../js/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            transition: font-size 0.3s ease;
        }
        
        .article-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .abstract {
            background-color: #f8f9fa;
            padding: 20px;
            border-left: 4px solid #4a90e2;
            margin-bottom: 25px;
            border-radius: 0 8px 8px 0;
            font-size: 15px;
            color: #555;
        }
        
        .content {
            margin-bottom: 30px;
        }
        
        .content p {
            margin-bottom: 18px;
            text-align: justify;
            font-size: 16px;
        }
        
        .content h2 {
            font-size: 20px;
            margin: 25px 0 15px;
            color: #333;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 30px 0;
            color: #999;
        }
        
        .divider::before, .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #eee;
        }
        
        .divider-content {
            padding: 0 15px;
            font-size: 14px;
        }
        
        .numbered-list {
            counter-reset: item;
            margin-left: 20px;
            margin-bottom: 25px;
        }
        
        .numbered-list li {
            counter-increment: item;
            margin-bottom: 15px;
            list-style-type: none;
            position: relative;
            padding-left: 30px;
        }
        
        .numbered-list li:before {
            content: counter(item);
            background-color: #4a90e2;
            color: white;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            position: absolute;
            left: 0;
            top: 2px;
        }
        
        .highlight-box {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            border-left: 4px solid #4a90e2;
        }
        
        .highlight-box h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .highlight-box p {
            margin-bottom: 0;
            color: #555;
        }
        
        .follow-section {
            background: linear-gradient(135deg, #4a90e2, #63b3ed);
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            color: white;
            margin-top: 40px;
        }
        
        .follow-section h3 {
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .follow-section p {
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .qrcode {
            width: 150px;
            height: 150px;
            background-color: white;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 14px;
            color: #333;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            font-size: 14px;
            color: #999;
        }
        
        /* 右侧工具栏样式 */
        .toolbar {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }
        
        .tool-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #4a90e2;
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            font-size: 18px;
        }
        
        .tool-btn:hover {
            background-color: #3a7bc8;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        .tool-btn:active {
            transform: translateY(0);
        }
        
        /* 导出图片预览样式 */
        .image-preview {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .preview-content {
            max-width: 90%;
            max-height: 90%;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            position: relative;
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 80vh;
            display: block;
            margin: 0 auto;
        }
        
        .close-preview {
            position: absolute;
            top: 10px;
            right: 15px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        
        .download-btn {
            display: block;
            margin: 15px auto 0;
            padding: 10px 20px;
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            
            .article-container {
                padding: 20px;
            }
            
            .title {
                font-size: 20px;
            }
            
            .toolbar {
                right: 10px;
            }
            
            .tool-btn {
                width: 45px;
                height: 45px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <button class="tool-btn" id="increaseFont" title="放大文字">A+</button>
        <button class="tool-btn" id="decreaseFont" title="缩小文字">A-</button>
        <button class="tool-btn" id="exportImage" title="导出长图">📷</button>
    </div>
    
    <div class="article-container" id="articleContent" contenteditable="true">
        <div class="header">
            <h1 class="title">如何高效学习编程：从零基础到项目实战的完整指南</h1>
        </div>
        
        <div class="abstract">
            <p>编程学习之路充满挑战，但掌握正确方法可以事半功倍。本文分享一套经过验证的学习路径，帮助初学者系统掌握编程技能，避开常见陷阱，快速成长为合格开发者。</p>
        </div>
        
        <div class="content">
            <p>在数字化时代，编程已成为一项极具价值的技能。无论你是想转行进入科技行业，还是希望通过编程解决实际问题，掌握编程都能为你打开新的大门。</p>
            
            <h2>编程学习的五大误区</h2>
            <p>许多初学者在学习编程时容易陷入以下误区，导致学习效率低下甚至半途而废：</p>
            
            <div class="numbered-list">
                <li>盲目追求最新技术，忽视基础知识</li>
                <li>只看不练，缺乏实际编码经验</li>
                <li>试图记忆所有语法，而不是理解原理</li>
                <li>遇到困难就放弃，缺乏坚持</li>
                <li>孤立学习，不参与社区交流</li>
            </div>
            
            <div class="divider">
                <div class="divider-content">· 学习路径 ·</div>
            </div>
            
            <h2>四阶段学习路线图</h2>
            <p>遵循以下四个阶段，你可以系统性地掌握编程技能：</p>
            
            <div class="highlight-box">
                <h3>第一阶段：基础入门（1-2个月）</h3>
                <p>选择一门入门友好的语言（如Python），学习基本语法、数据类型、控制结构等核心概念。完成简单练习和小项目，建立编程思维。</p>
            </div>
            
            <div class="highlight-box">
                <h3>第二阶段：核心技能（3-4个月）</h3>
                <p>深入学习数据结构、算法、面向对象编程等核心概念。开始使用版本控制工具（如Git），并学习调试技巧。</p>
            </div>
            
            <div class="highlight-box">
                <h3>第三阶段：项目实践（2-3个月）</h3>
                <p>通过实际项目巩固所学知识。可以从简单的工具类项目开始，逐步尝试更复杂的应用。这一阶段是技能内化的关键。</p>
            </div>
            
            <div class="highlight-box">
                <h3>第四阶段：专业深化（持续学习）</h3>
                <p>根据兴趣和职业规划选择专业方向（如Web开发、数据科学、移动应用等），深入学习相关技术和框架。</p>
            </div>
            
            <p>每个阶段都需要理论与实践相结合，建议将70%的时间用于编码实践，30%的时间用于理论学习。</p>
            
            <div class="divider">
                <div class="divider-content">· 资源推荐 ·</div>
            </div>
            
            <h2>高效学习工具与资源</h2>
            <p>选择合适的学习资源可以大大提高学习效率：</p>
            
            <div class="numbered-list">
                <li>在线学习平台：Coursera、edX、Udemy等提供结构化课程</li>
                <li>互动编程网站：FreeCodeCamp、Codecademy等提供即时反馈</li>
                <li>开源项目：GitHub上有大量优质项目可供学习参考</li>
                <li>技术社区：Stack Overflow、Reddit等是解决问题的好去处</li>
                <li>编程书籍：经典教材提供系统深入的知识体系</li>
            </div>
            
            <p>记住，最好的资源是适合你当前水平和学习风格的资源，不必盲目追求所谓的"最佳"资源。</p>
        </div>
        
        <div class="follow-section">
            <h3>关注我们，获取更多技术干货</h3>
            <p>每周更新编程技巧、项目实战和行业动态</p>
            <div class="qrcode">公众号二维码</div>
            <p>扫描上方二维码，开启你的编程进阶之路</p>
        </div>
    </div>
    
    <div class="image-preview" id="imagePreview">
        <div class="preview-content">
            <button class="close-preview" id="closePreview">×</button>
            <img class="preview-image" id="previewImage" src="" alt="文章长图预览">
            <button class="download-btn" id="downloadImage">下载图片</button>
        </div>
    </div>

    <script>
        // 字体大小控制
        let currentFontSize = 16; // 默认字体大小
        
        document.getElementById('increaseFont').addEventListener('click', function() {
            if (currentFontSize < 24) {
                currentFontSize += 2;
                updateFontSize();
            }
        });
        
        document.getElementById('decreaseFont').addEventListener('click', function() {
            if (currentFontSize > 12) {
                currentFontSize -= 2;
                updateFontSize();
            }
        });
        
        function updateFontSize() {
            document.body.style.fontSize = currentFontSize + 'px';
            
            // 更新标题大小
            const title = document.querySelector('.title');
            const baseTitleSize = 24;
            title.style.fontSize = (baseTitleSize * currentFontSize / 16) + 'px';
            
            // 更新副标题大小
            const subTitles = document.querySelectorAll('h2');
            const baseSubTitleSize = 20;
            subTitles.forEach(subTitle => {
                subTitle.style.fontSize = (baseSubTitleSize * currentFontSize / 16) + 'px';
            });
            
            // 更新高亮框标题大小
            const highlightTitles = document.querySelectorAll('.highlight-box h3');
            const baseHighlightTitleSize = 18;
            highlightTitles.forEach(title => {
                title.style.fontSize = (baseHighlightTitleSize * currentFontSize / 16) + 'px';
            });
        }
        
        // 导出长图功能
        document.getElementById('exportImage').addEventListener('click', function() {
            const articleContent = document.getElementById('articleContent');
            
            // 显示加载提示
            const originalText = this.innerHTML;
            this.innerHTML = '生成中...';
            this.disabled = true;
            
            html2canvas(articleContent, {
                scale: 2, // 提高图片质量
                useCORS: true,
                allowTaint: true,
                backgroundColor: '#ffffff'
            }).then(canvas => {
                // 恢复按钮状态
                this.innerHTML = originalText;
                this.disabled = false;
                
                // 显示预览
                const preview = document.getElementById('imagePreview');
                const previewImage = document.getElementById('previewImage');
                
                previewImage.src = canvas.toDataURL('image/png');
                preview.style.display = 'flex';
            }).catch(error => {
                console.error('生成图片失败:', error);
                alert('生成图片失败，请重试');
                this.innerHTML = originalText;
                this.disabled = false;
            });
        });
        
        // 关闭预览
        document.getElementById('closePreview').addEventListener('click', function() {
            document.getElementById('imagePreview').style.display = 'none';
        });
        
        // 下载图片
        document.getElementById('downloadImage').addEventListener('click', function() {
            const previewImage = document.getElementById('previewImage');
            const link = document.createElement('a');
            link.download = '公众号文章截图.png';
            link.href = previewImage.src;
            link.click();
        });
    </script>
</body>
</html>